<layout name='PublishedRecipe' />
<div id="publishedrecipe-add-edit">

    <div class="left">

        <div class="innerleft">
            <form action="__APP__/Recipe/insert" method="post" id="recipeform">
            <input type="hidden" name="image" class="recipepic" />
            <input type="hidden" name="recipetype" value="Recipe" />
            <p>Creat your own recipe</p><input name="changes" type="hidden" value="<{$Think.get.type}>" />
            <div class="selectrecipeinfos">

                <ul class="ulleft">
                    <li class="recipenameli"><span><strong style="color:blue;">*</strong>&nbsp;Name:</span>
                        <input type="text" class="recipename" name="name" />
                    </li>
                    <li>&nbsp;&nbsp;Cook method:
                        <a class="entrymyself" title="Didn't find the result suitable to you? Press me then try to entry by yourself.
" href="javascript:;"><img src="../Public/imgs/lx_tu.gif" /></a>

                        <span id="cookmethod">
                            <select name="cookmethod" class="selectmyself">
                                <volist name="setcookmethodinfo" id="vo">
                                    <option value="<{$vo.id}>"><{$vo.name}></option>
                                </volist>
                            </select>
                        </span>

                    </li>

                    <li>&nbsp;&nbsp;Course:
                        <a class="entrymyself" title="Didn't find the result suitable to you? Press me then try to entry by yourself.
" href="javascript:;"><img src="../Public/imgs/lx_tu.gif" /></a>
                        <span id="course">
                            <select name="course" class="selectmyself">
                                <volist name="setcourseinfo" id="vo">
                                    <option value="<{$vo.id}>"><{$vo.name}></option>
                                </volist>
                            </select>
                        </span>
                    </li>

                    <li>&nbsp;&nbsp;Easy or hard:
                        <a class="entrymyself" title="Didn't find the result suitable to you? Press me then try to entry by yourself.
" href="javascript:;"><img src="../Public/imgs/lx_tu.gif" /></a>
                        <span id="easyorhard">
                            <select name="easyorhard" class="selectmyself">
                                <volist name="seteasyhardinfo" id="vo">
                                    <option value="<{$vo.id}>"><{$vo.name}></option>
                                </volist>
                            </select>
                        </span>
                    </li>

                    <li>&nbsp;&nbsp;Total time:
                        <a class="entrymyself" title="Didn't find the result suitable to you? Press me then try to entry by yourself.
" href="javascript:;"><img src="../Public/imgs/lx_tu.gif" /></a>
                        <span id="totaltime">
                            <select name="totaltime" class="selectmyself" >
                                <volist name="settotaltimeinfo" id="vo">
                                    <option value="<{$vo.id}>"><{$vo.name}></option>
                                </volist>
                            </select>
                        </span>
                    </li>


                </ul>

                <ul class="ulright">

                    <li class="recipenameli"><span><strong style="color:blue;">*</strong>&nbsp;Choose article type:</span>
                        <select style="width:170px; height:33px;font-size: 15px;padding:2px 1px;margin:0 20px 0 0;" name="recipetypeid" id="selecttypearticle">
                            <volist name="articles" id="vo">
                                <option value="<{$i}>"><{$vo}></option>
                            </volist>
                        </select>
                    </li>

                    <li><strong style="color:blue;">*</strong>&nbsp;Choose Subclasses:
                        <select name="recipecategoryid" id="chooseubtype" style="width:170px;margin-right: 20px;padding:1px 0">
                            <option value="0">-- Choose Subclasses --</option>
                            <volist name="recipecategoryinfo" id="vo">
                                <option value="<{$vo.id}>"><{$vo.name}></option>
                            </volist>
                        </select>
                    </li>

                    <li>&nbsp;&nbsp;Dietary needs:
                        <a class="entrymyself" title="Didn't find the result suitable to you? Press me then try to entry by yourself.
" href="javascript:;"><img src="../Public/imgs/lx_tu.gif" /></a>
                        <span id="dietaryneeds">
                            <select name="dietaryneeds" class="selectmyself">
                                <volist name="setdietaryneedsinfo" id="vo">
                                    <option value="<{$vo.id}>"><{$vo.name}></option>
                                </volist>
                            </select>
                        </span>
                    </li>

                    <li>&nbsp;&nbsp;Serve people:
                        <a class="entrymyself" title="Didn't find the result suitable to you? Press me then try to entry by yourself.
" href="javascript:;"><img src="../Public/imgs/lx_tu.gif" /></a>
                        <span id="servepeople">
                            <select name="servepeople" class="selectmyself">
                                <volist name="setservepeopleinfo" id="vo">
                                    <option value="<{$vo.id}>"><{$vo.name}></option>
                                </volist>
                            </select>
                        </span>
                    </li>

                    <li>&nbsp;&nbsp;Occasion:
                        <a class="entrymyself" title="Didn't find the result suitable to you? Press me then try to entry by yourself.
" href="javascript:;"><img src="../Public/imgs/lx_tu.gif" /></a>
                        <span id="occasion">
                            <select name="occasion" class="selectmyself">
                                <volist name="setoccasioninfo" id="vo">
                                    <option value="<{$vo.id}>"><{$vo.name}></option>
                                </volist>
                            </select>
                        </span>
                    </li>

                    <!--<li>&nbsp;&nbsp;Complete figure:-->
                        <!--<button class="upload" type="button" id="uploadphoto">Upload photo</button>-->
                    <!--</li>-->
                </ul>
            </div>

            <div class="whentips">

            <div class="main">

                <p class="titles"><strong style="color:blue;">*</strong>&nbsp;Main ingredient(s)</p>

                <dl class="maindl">
                    <dt>&nbsp;</dt>
                    <dd>Ingredient (e.g pork)</dd>
                    <dd>Preparation (e.g chopped)</dd>
                    <dd style="text-align: left;"><span>Amount (e.g 1/2)</span></dd>
                </dl>

                <div id="addmaintothis">

                    <dl class="maindls">
                        <dt><img class="maindelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
                        <dd><input type="text" name="main[]" /></dd>
                        <dd><input type="text" name="mainpreparation[]" /></dd>
                        <dd>
                            <input class="maindlshalfone" type="text" name="mainamount[]" />
                            <select name="maindeal[]" class="maindlshalftwo">

                            </select>
                        </dd>
                        <input type="hidden" name="mainfoodsectionid[]" />
                        <input type="hidden" name="mainfoodcategoryid[]" />
                        <input type="hidden" name="mainfoodarticleid[]" />
                    </dl>

                    <dl class="maindls">
                        <dt><img class="maindelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
                        <dd><input type="text" name="main[]" /></dd>
                        <dd><input type="text" name="mainpreparation[]" /></dd>
                        <dd>
                            <input class="maindlshalfone" type="text" name="mainamount[]" />
                            <select name="maindeal[]" class="maindlshalftwo">

                            </select>
                        </dd>
                        <input type="hidden" name="mainfoodsectionid[]" />
                        <input type="hidden" name="mainfoodcategoryid[]" />
                        <input type="hidden" name="mainfoodarticleid[]" />
                    </dl>

                </div>

                <div>
                    <button class="addmain" type="button">Add another condiment</button>
                </div>

            </div>

            <div class="other">

                <p class="titles">Other ingredient(s)</p>

                <dl class="otherdl">
                    <dt>&nbsp;</dt>
                    <dd>Ingredient (e.g pork)</dd>
                    <dd>Preparation (e.g chopped)</dd>
                    <dd style="text-align: left;"><span>Amount (e.g 1/2)</span></dd>
                </dl>


        <div id="addothertothis">

                <dl class="otherdls">
                    <dt><img class="otherdelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
                    <dd><input type="text" name="other[]" /></dd>
                    <dd><input type="text" name="accessorypreparation[]"  /></dd>
                    <dd>
                        <input class="otherdlshalfone" type="text" name="accessoryamount[]"/>
                        <select name="accessorydeal[]" class="otherdlshalftwo">

                        </select>
                    </dd>
                    <input type="hidden" name="accessoryfoodsectionid[]" />
                    <input type="hidden" name="accessoryfoodcategoryid[]" />
                    <input type="hidden" name="accessoryfoodarticleid[]" />
                </dl>

            <dl class="otherdls">
                <dt><img class="otherdelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
                <dd><input type="text" name="other[]" /></dd>
                <dd><input type="text" name="accessorypreparation[]" /></dd>
                <dd>
                    <input class="otherdlshalfone" type="text" name="accessoryamount[]"/>
                    <select name="accessorydeal[]" class="otherdlshalftwo">

                    </select>
                </dd>
                <input type="hidden" name="accessoryfoodsectionid[]" />
                <input type="hidden" name="accessoryfoodcategoryid[]" />
                <input type="hidden" name="accessoryfoodarticleid[]" />
            </dl>

        </div>

                <div>
                    <button class="addother" type="button">Add another condiment</button>
                </div>

            </div>

            <div class="others">

                <p class="titles">Condiment(s)</p>

                <dl class="othersdl">
                    <dt>&nbsp;</dt>
                    <dd>Ingredient (e.g pork)</dd>
                    <dd>Preparation (e.g chopped)</dd>
                    <dd style="text-align: left;"><span>Amount (e.g 1/2)</span></dd>
                </dl>


            <div id="addotherstothis">

                <dl class="othersdls">
                    <dt><img class="othersdelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
                    <dd><input type="text" name="condiment[]" /></dd>
                    <dd><input type="text" name="condimentpreparation[]" /></dd>
                    <dd><input class="othersdlshalfone" type="text" name="condimentamount[]" />
                            <select name="condimentdeal[]" class="othersdlshalftwo">

                            </select>
                    </dd>
                    <input type="hidden" name="condimentfoodsectionid[]" />
                    <input type="hidden" name="condimentfoodcategoryid[]" />
                    <input type="hidden" name="condimentfoodarticleid[]" />
                </dl>

                <dl class="othersdls">
                    <dt><img class="othersdelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
                    <dd><input type="text" name="condiment[]" /></dd>
                    <dd><input type="text" name="condimentpreparation[]" /></dd>
                    <dd><input class="othersdlshalfone" type="text" name="condimentamount[]" />
                        <select name="condimentdeal[]" class="othersdlshalftwo">

                        </select>
                    </dd>
                    <input type="hidden" name="condimentfoodsectionid[]" />
                    <input type="hidden" name="condimentfoodcategoryid[]" />
                    <input type="hidden" name="condimentfoodarticleid[]" />
                </dl>

            </div>

                <div>
                    <button class="addothers" type="button">Add another condiment</button>
                </div>

            </div>

            <div class="calculation">
                <input type="button" class="submit" value="Nutrition check" />
            </div>

            </div>

            <p style="font-size: 20px;margin:0;color:#6E6E6E">Brief description:</p>

            <div class="shortdescription">
                <textarea name="description" class="shorttextarea"></textarea>
            </div>

            <p style="font-size: 20px;margin:0;color:#6E6E6E">*&nbsp;Description:</p>

            <div class="content">
                <textarea name="details"></textarea>
                <div class="countchars"><span class="word_count1">0</span> chars</div>
            </div>

            <p style="font-size: 20px;margin:0;color:#6E6E6E">Tips:</p>

            <div class="tips">
                <textarea name="technique" class="tips"></textarea>
            </div>

            <div class="submitinfo">
                <input type="checkbox" id="checkbox" value="1" />&nbsp;&nbsp;I certify that I have the right to distribute this recipe and/or photo and that they do not violate the mfrem.com Terms and Conditions
            </div>

            <div>
                <input type="submit" class="addsubmit" value="submit" />
                <div class="leftselect">
                    <ul>
                        <li><input type="radio" checked="checked" id="reciperadioone" name="publish" value="1" /><label for="reciperadioone"><span>Share the recipe toall</span></label></li>
                        <li><input type="radio" id="reciperadiotwo" name="publish" value="0" /><label for="reciperadiotwo"><span>Only myself can see this recipe</span></label></li>
                    </ul>
                </div>
            </div>
            </form>
        </div>
    </div>

    <div class="right">
        <div class="thumbimg">
            <p>Photo Preview</p>
            <div class="img">
                <img width="180" height="180" src="" />
            </div>

            <p class="p2">
                <input type="button" id="uploadphoto" value="Upload your recipe photo"><br />

            </p>
            <p class="p1">Maximum upload file size:  3 MB</p>

        </div>

        <div class="calculate">
            <p>Nutrition calculation</p>
            <ul>
                <li><span class="spanone">Calories:</span><span class="spandata">0</span>g</li>
                <li><span class="spanone">Total Fat:</span><span class="spandata">0</span>g</li>
                <li><span class="spanone">Saturated Fat:</span><span class="spandata">0</span>g</li>
                <li><span class="spanone">Cholesterol:</span><span class="spandata">0</span>mg</li>
                <li><span class="spanone">Sodium:</span><span class="spandata">0</span>mg</li>
                <li><span class="spanone">Potassium:</span><span class="spandata">0</span>mg</li>
                <li><span class="spanone">Total Carbohydrate:</span><span class="spandata">0</span>g</li>
                <li><span class="spanone">Dietary Fiber:</span><span class="spandata">0</span>g</li>
                <li><span class="spanone">Sugars:</span><span class="spandata">0</span>g</li>
                <li><span class="spanone">Protein:</span><span class="spandata">0</span>g</li>
                <li><span class="spanone">Vitamin A:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Vitamin B-12:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Vitamin B-6:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Vitamin C:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Vitamin D:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Vitamin E:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Calcium:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Copper:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Folate:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Iron:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Magnesium:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Manganese:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Niacin:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Pantothenic Acid:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Phosphorus:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Riboflavin:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Selenium:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone">Thiamin:</span><span class="spandata">0</span>%</li>
                <li><span class="spanone" style="border:none;">Zinc:</span><span class="spandata">0</span>%</li>
            </ul>
        </div>

        <div class="minright"></div>
    </div>

    <div style="display: none;">
        <div id="inline1" style="width:840px;height:390px;overflow-y:hidden;">

            <div class="imageCut">

                <div id="picDiv">
                    <img src="" />
                </div>

                <div id="picSeeSmall"></div>
                <div id="picSeeBig"></div>


                    <input class="submit" type="submit" value=" Confirm " />
                    <p class="movetext" style="float: left;margin:10px 0 0 150px;color:#6E6E6E;">Please choose photos focus</p>
                    <input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" />
                    <input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" />


            </div>

        </div>
    </div>

    <a id="various1" href="#inline1" style="display:none" >Inline</a>

    <div id="waits">

    <div id="waitmain" style="display:none;">

        <dl class="maindls">
            <dt><img class="maindelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
            <dd><input type="text" name="main[]" /></dd>
            <dd><input type="text" name="mainpreparation[]" /></dd>
            <dd>
                <input class="maindlshalfone" type="text" name="mainamount[]" />
                <select name="maindeal[]" class="maindlshalftwo">

                </select>
            </dd>
            <input type="hidden" name="mainfoodsectionid[]" />
            <input type="hidden" name="mainfoodcategoryid[]" />
            <input type="hidden" name="mainfoodarticleid[]" />
        </dl>

    </div>

    <div id="waitother" style="display:none;">

        <dl class="otherdls">
            <dt><img class="otherdelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
            <dd><input type="text" name="other[]" /></dd>
            <dd><input type="text" name="accessorypreparation[]" /></dd>
            <dd>
                <input class="otherdlshalfone" type="text" name="accessoryamount[]" />
                <select name="accessorydeal[]" class="otherdlshalftwo">

                </select>
            </dd>
            <input type="hidden" name="accessoryfoodsectionid[]" />
            <input type="hidden" name="accessoryfoodcategoryid[]" />
            <input type="hidden" name="accessoryfoodarticleid[]" />
        </dl>

    </div>

    <div id="waitothers" style="display:none;">

        <dl class="othersdls">
            <dt><img class="othersdelete" width="10" height="10" src="../Public/imgs/XX.jpg" /></dt>
            <dd><input type="text" name="condiment[]"/></dd>
            <dd><input type="text" name="condimentpreparation[]" /></dd>
            <dd><input class="othersdlshalfone" type="text" name="condimentamount[]" />
                <select name="condimentdeal[]" class="othersdlshalftwo">

                </select>
            </dd>
            <input type="hidden" name="condimentfoodsectionid[]" />
            <input type="hidden" name="condimentfoodcategoryid[]" />
            <input type="hidden" name="condimentfoodarticleid[]" />
        </dl>

    </div>

    </div>

    <div id="waitselect" style="display: none;">

        <div class="cookmethod">
            <select name="cookmethod" class="selectmyself">
                <volist name="setcookmethodinfo" id="vo">
                    <option value="<{$vo.id}>"><{$vo.name}></option>
                </volist>
            </select>
        </div>

        <div class="dietaryneeds">
            <select name="dietaryneeds" class="selectmyself">
                <volist name="setdietaryneedsinfo" id="vo">
                    <option value="<{$vo.id}>"><{$vo.name}></option>
                </volist>
            </select>
        </div>

        <div class="servepeople">
            <select name="servepeople" class="selectmyself">
                <volist name="setservepeopleinfo" id="vo">
                    <option value="<{$vo.id}>"><{$vo.name}></option>
                </volist>
            </select>
        </div>

        <div class="occasion">
            <select name="" class="selectmyself">
                <volist name="setoccasioninfo" id="vo">
                    <option value="<{$vo.id}>"><{$vo.name}></option>
                </volist>
            </select>
        </div>

        <div class="course">
            <select name="course" class="selectmyself">
                <volist name="setcourseinfo" id="vo">
                    <option value="<{$vo.id}>"><{$vo.name}></option>
                </volist>
            </select>
        </div>

        <div class="easyorhard">
            <select name="easyorhard" class="selectmyself">
                <volist name="seteasyhardinfo" id="vo">
                    <option value="<{$vo.id}>"><{$vo.name}></option>
                </volist>
            </select>
        </div>

        <div class="totaltime">
            <select name="totaltime" class="selectmyself">
                <volist name="settotaltimeinfo" id="vo">
                    <option value="<{$vo.id}>"><{$vo.name}></option>
                </volist>
            </select>
        </div>


    </div>



</div>

<style>
    .autocomplete-w1 {
        background:url(__PUBLIC__/js/autocomplete/shadow.png) no-repeat bottom right;
        position:absolute; top:0; left:0; margin:6px 0 0 6px;
         /* IE6 fix: */ _background:none; _margin:1px 0 0 0;
        font-size: 12px;
    }

    .autocomplete {
        border:1px solid #999; background:#FFF; cursor:default; text-align:left;
        max-height:350px; overflow:auto; margin:-6px 6px 6px -6px;
         /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden;
    }
    .autocomplete .selected { background:#F0F0F0; cursor: pointer;}
    .autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
    .autocomplete strong { font-weight:normal; color:#3399FF; }

    .ke-icon-hello {
        background-image: url(__PUBLIC__/js/kindeditor/themes/default/c.gif);
        width: 16px;
        height: 16px;
    }

</style>

<script type="text/javascript" src="__PUBLIC__/js/kindeditor/kindeditor-min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/ajaxupload.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/autocomplete/jquery.autocomplete.js"></script>
<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="details"]', {
            langType : 'en',
            newlineTag : 'br',
            resizeType : 0,
            allowPreviewEmoticons : false,
            allowImageUpload : true,
            minHeight : 350,
            pasteType : 1,
            filterMode : true,
            items : [
                'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                'insertunorderedlist', '|', 'emoticons', 'image', 'link', 'hello','|', 'fullscreen'],
            afterChange : function() {
                K('.word_count1').html(this.count('text'));
            }
        });
    });

</script>